<template>
  <div class="app-container">
    <el-form ref="form" :model="form" label-width="70px">
      <el-row :gutter="24">
        <el-col :span="4">
          <el-form-item label="用户名称" prop="nickName">
            <el-input v-model="form.nickName" placeholder="请输入用户名称" />
          </el-form-item>
        </el-col>
        <el-col :span="4">
          <el-form-item label="手机号码" prop="phone">
            <el-input v-model="form.phone" placeholder="请输入手机号码" />
          </el-form-item>
        </el-col>

        <el-col :span="6">
          <el-form-item label="订单状态" prop="orderState">
            <el-select v-model="form.orderState" placeholder="请选择">
              <el-option label="请选择" value="" />
              <el-option label="未支付" value="0" />
              <el-option label="待发货" value="1" />
              <el-option label="待收货" value="2" />
              <el-option label="已完成" value="3" />
              <el-option label="已取消" value="4" />
            </el-select>
          </el-form-item>
        </el-col>

        <el-col :span="6">
          <el-button type="primary" @click="loadData">搜索</el-button>
          <el-button @click="searchResetForm('form')">重 置</el-button>

        </el-col>
      </el-row>
    </el-form>

    <div style="margin-bottom: 20px;" />
    <el-table
      :loading="loading"
      :data="tableData"
      border
      style="width: 100%"
    >
      <el-table-column
        label="序号"
        type="index"
        align="center"
        width="50"
      />
      <el-table-column label="商品信息" width="80" type="expand">
        <template slot-scope="props">
          <el-form v-for="item in props.row.items" label-position="left" inline class="demo-table-expand">
            <el-form-item label="商品名称">
              <span>{{ item.goodsName }}</span>
            </el-form-item>
            <el-form-item label="商品数量">
              <span>{{ item.goodsNum }}</span>
            </el-form-item>
            <el-form-item label="商品规格">
              <span>{{ item.qualityName }}</span>
            </el-form-item>
            <el-form-item label="商品价格">
              <span>{{ item.goodsPrice }}</span>
            </el-form-item>
          </el-form>
        </template>
      </el-table-column>
      <el-table-column v-for="(item,index) in columnLists" :key="index" :prop="item.prop" :label="item.label" align="center" />
      <el-table-column fixed="right" label="操作" align="center">
        <template slot-scope="scope">
          <el-button
            type="text"

            @click="show(scope.$index)"
          >
            查看
          </el-button>

          <el-button
            v-if="scope.row.orderStatus === 1"
            type="text"
            @click="edit(scope.$index)"
          >
            发货
          </el-button>
          <el-button
            v-if="scope.row.orderStatus === 2"
            type="text"
            @click="wl(scope.$index)"
          >
            物流
          </el-button>
        </template>
      </el-table-column>
    </el-table>

    <Pagination :total="total" :current-page="pageNum" :page-size="pageSize" @handleChange="handleChange" />

    <el-dialog :title="title" :close-on-click-modal="false" :visible.sync="dialogVisible" width="45%">
      <el-form ref="formLabelAlign" :model="formLabelAlign" :rules="rules" label-width="140px">

        <el-row>
          <el-col :span="10">
            <el-form-item label="快递名称" prop="kdId">
              <el-select v-model="formLabelAlign.kdId" :filterable="true">
                <el-option v-for="item in kdArray" :key="item.id" :value="item.id" :label="item.name" />
              </el-select>
            </el-form-item>
          </el-col>
          <el-col :span="10">
            <el-form-item label="快递单号" prop="kdCode">
              <el-input v-model="formLabelAlign.kdCode" clearable />
            </el-form-item>
          </el-col>

        </el-row>
        <el-row>

          <el-col :span="10">
            <el-form-item label="收货姓名">
              <span v-text="orderItem.name" />
            </el-form-item>
          </el-col>
          <el-col :span="10">
            <el-form-item label="手机号码">
              <span v-text="orderItem.phone" />
            </el-form-item>

          </el-col>
        </el-row>
        <el-row>
          <el-col :span="10">
            <el-form-item label="收货地址">
              <span v-text="orderItem.address" />
            </el-form-item>

          </el-col>
          <el-col :span="10">
            <el-form-item label="商品金额">
              <span v-text="orderItem.totalPrice" />
            </el-form-item>

          </el-col>
        </el-row>
        <el-row>
          <el-table
            :loading="loading"
            :data="orderItem.items"
            border
            style="width: 100%"
          >
            <el-table-column
              label="序号"
              type="index"
              align="center"
              width="50"
            />

            <el-table-column v-for="(item,index) in goodsColumnList" :key="index" :prop="item.prop" :label="item.label" align="center" />
          </el-table>
        </el-row>

      </el-form>

      <div slot="footer" class="dialog-footer">
        <el-button type="primary" size="mini" @click="save('formLabelAlign')">确 定</el-button>
        <el-button size="mini" @click="resetForm('formLabelAlign')">重 置</el-button>
        <el-button size="mini" type="danger" @click="cancel('formLabelAlign')">关 闭</el-button>
      </div>
    </el-dialog>
    <el-dialog :title="title" :close-on-click-modal="false" :visible.sync="dialogShow" width="45%">
      <el-form ref="formLabelAlign" :model="formLabelAlign" label-width="140px">
        <el-row>

          <el-col :span="10">
            <el-form-item label="收货姓名">
              <span v-text="orderItem.name" />
            </el-form-item>
          </el-col>
          <el-col :span="10">
            <el-form-item label="手机号码">
              <span v-text="orderItem.phone" />
            </el-form-item>

          </el-col>
        </el-row>
        <el-row>
          <el-col :span="10">
            <el-form-item label="收货地址">
              <span v-text="orderItem.address" />
            </el-form-item>

          </el-col>
          <el-col :span="10">
            <el-form-item label="商品金额">
              <span v-text="orderItem.totalPrice" />
            </el-form-item>

          </el-col>
        </el-row>
        <el-row>
          <el-table
            :loading="loading"
            :data="orderItem.items"
            border
            style="width: 100%"
          >
            <el-table-column
              label="序号"
              type="index"
              align="center"
              width="50"
            />

            <el-table-column v-for="(item,index) in goodsColumnList" :key="index" :prop="item.prop" :label="item.label" align="center" />
          </el-table>
        </el-row>

      </el-form>

      <div slot="footer" class="dialog-footer">
        <el-button size="mini" type="danger" @click="cancelShow('formLabelAlign')">关 闭</el-button>
      </div>
    </el-dialog>
    <el-dialog title="物流信息" :close-on-click-modal="false" :visible.sync="wlDialogShow" width="45%">

      <el-steps direction="vertical" :active="1">
        <el-step v-for="item in tracesArray" :title="item.AcceptStation" :description="item.AcceptTime" />
      </el-steps>

      <div slot="footer" class="dialog-footer">
        <el-button size="mini" type="danger" @click="cancelWlShow()">关 闭</el-button>
      </div>
    </el-dialog>

  </div>
</template>

<script>

import { showData, resetForm, validate, success, fail } from '@/api/common'
import Pagination from '@/components/Pagination'
import { get, lists, post } from '@/api/requestCommon'
export default {
  name: 'PagePermission',
  components: {
    Pagination
  },
  data() {
    return {
      wlDialogShow: false,
      imageData: [],
      pageNum: 1, pageSize: 10, total: 0,
      form: { nickName: '', phone: '', orderState: '' },
      tableData: [],
      selectRows: [],
      dialogVisible: false,
      title: '',
      editId: '',
      columnLists: [
        { prop: 'orderNo', label: '订单编号' },
        { prop: 'nickName', label: '会员昵称' },
        { prop: 'phone', label: '手机号码' },
        { prop: 'name', label: '收货人' },
        { prop: 'phone', label: '收货电话' },
        { prop: 'statusName', label: '订单状态' },
        { prop: 'createTime', label: '下单时间' },
        { prop: 'payTime', label: '支付时间' }
      ],
      goodsColumnList: [
        { prop: 'goodsName', label: '商品名称' },
        { prop: 'goodsNum', label: '商品数量' },
        { prop: 'goodsPrice', label: '商品价格' }
      ],
      type: 'shop',
      dialogShow: false,

      formLabelAlign: {
        id: '',
        kdId: '',
        kdCode: ''

      },
      orderItem: {
        id: '',
        name: '',
        address: '',
        phone: '',
        totalPrice: '',
        items: []
      },
      rules: {
        kdId: [
          { required: true, message: '请选择快递公司', trigger: 'change' }
        ],
        kdCode: [
          { required: true, message: '请输入快递单号', trigger: 'change' }
        ]
      },
      loading: true,
      kdArray: [],
      tracesArray: []
    }
  },
  created() {

  },
  mounted() {
    this.loadData()
    this.kdList()
  },
  methods: {
    wl(index) {
      const orderId = this.tableData[index].id
      get('order/kdInfo/' + orderId).then(res => {
        if (res.code === 200) {
          console.log(res.data)
          this.wlDialogShow = true
          this.tracesArray = res.data.Traces
        } else {
          fail(res.msg)
        }
      })
    },
    cancelWlShow() {
      this.wlDialogShow = false
    },
    kdList() {
      get('order/kdList').then(res => {
        if (res.code === 200) {
          this.kdArray = res.data
        } else {
          fail(res.msg)
        }
      })
    },
    cancelShow(formName) {
      this.dialogShow = false
    },
    show(index) {
      this.title = ''
      this.dialogShow = true
      this.orderItem = this.tableData[index]
    },
    edit(index) {
      this.title = '发货信息'
      this.dialogVisible = true
      this.orderItem = this.tableData[index]
    },
    cancel(formName) {
      resetForm(this, formName)
      this.dialogVisible = false
    },

    resetForm(formName) {
      resetForm(this, formName)
    },
    searchResetForm(formName) {
      resetForm(this, formName)
      this.loadData()
    },

    save(formName) {
      if (validate(this, formName)) {
        this.formLabelAlign.id = this.orderItem.id
        post('order/save', this.formLabelAlign).then(response => {
          if (response.code === 200) {
            success(response.msg)
            this.dialogVisible = false
            this.loadData()
          } else {
            fail(response.msg)
          }
        })
      }
    },

    selectionChange(rows) {
      this.selectRows = rows
    },

    handleChange(pageNum, pageSize) {
      this.pageNum = pageNum
      this.pageSize = pageSize
      this.loadData()
    },

    loadData() {
      this.form.pageNum = this.pageNum
      this.form.pageSize = this.pageSize
      lists('order', this.form).then(response => {
        debugger
        if (response.code === 200) {
          showData(response, this)
        }
      })
    }
  }
}
</script>

<style lang="scss" scoped>
.demo-table-expand {
  font-size: 0;
}
.demo-table-expand label {
  width: 90px;
  color: #99a9bf;
}
.demo-table-expand .el-form-item {
  margin-right: 0;
  margin-bottom: 0;
  width: 50%;
}
</style>
